<template>
	<transition name="progress" appear :duration="400">
		<div class="progress-container"
		     v-if="show"
		>
			<div class="mask"></div>
			<div class="container">
				<svg-icon icon="close"
				          @click="closeHandler"
				          :class="['icon',isSuccess ? '' : 'disabled']"/>
				<div class="header">
					<span class="title">{{ title }}</span>
				</div>
				<div class="body">
					<el-progress type="circle"
					             :percentage="step"
					             :status="progressType"
					/>
				</div>
				<div class="footer">
					<el-button
							size="small"
							@click="cancelHandler"
							type="info"
							:disabled="isSuccess"
					>
						取消
					</el-button>
					<el-button
							size="small"
							@click="closeHandler"
							:disabled="!isSuccess"
							type="primary">
						关闭
					</el-button>
				</div>
			</div>
		</div>
	</transition>
</template>

<script setup>
import SvgIcon from '@/libs/icon'
import {ElButton, ElProgress} from 'element-plus'
import {computed, onMounted, ref} from "vue";

const props = defineProps({
	title: {
		type: String,
		default: '提示'
	},
	percentage: {
		type: Object,
		required: true
	},
	onCancel: {
		type: Function,
		required: true
	},
	onClose: {
		type: Function,
	}
})
const show = ref(false)
const step = computed(() => props.percentage['value'])

const closeHandler = () => {
	if (isSuccess.value) {
		props.onClose()
		show.value = false
	}
}

const cancelHandler = () => {
	if (isSuccess.value) {
		return
	}
	show.value = false
	props.onCancel()
}

const progressType = computed(() => {
	if (step.value !== 100) return ''
	if (step.value === 100) return 'success'
})
const isSuccess = computed(() => {
	return step.value === 100
})
onMounted(() => {
	show.value = true
})

</script>

<style scoped lang="scss">
$containerWidth: 520px;
$containerHeight: 270px;
.progress-enter-active .mask,
.progress-leave-active .mask {
	transition: all .2s ease-in-out;
}

.progress-enter-from .mask,
.progress-leave-to .mask {
	opacity: 0;
	backdrop-filter: blur(0) !important;
}

.progress-enter-active .container,
.progress-leave-active .container {
	transition: all .4s ease;
}

.progress-enter-from .container,
.progress-leave-to .container {
	opacity: 0;
	transform: scale(.8);
}

.progress-container {
	position: fixed;
	inset: 0 0 0 0;
	overflow: hidden;
	z-index: 9999;
	box-sizing: border-box;

	.mask {
		position: absolute;
		inset: 0 0 0 0;
		background-color: rgba(0, 0, 0, .1);
		backdrop-filter: blur(4px);
	}

	.container {
		position: absolute;
		width: $containerWidth;
		height: $containerHeight;
		background: #fff;
		border-radius: 3px;
		left: 50%;
		top: 50%;
		box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08);
		margin: calc(-#{$containerHeight} / 2) 0 0 calc(-#{$containerWidth} / 2);
		font-size: 14px;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-flow: column;

		.icon {
			position: absolute;
			right: 10px;
			top: 10px;
			font-size: 20px;

			&.disabled {
				cursor: not-allowed;
				//pointer-events: none;
			}
		}

		.body {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.footer {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>